<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表</title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		

		<form class="layui-form" action="">
			<div class="layui-form-item">
				<label class="layui-form-label">排序</label>
				<div class="layui-input-inline">
					<select name="orderBy">
						<option value=""></option>
						<option value="LoginName">用户名</option>
						<option value="LastLoginTime">最后登录时间</option>
						<option value="CreateTime">创建时间</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">用户名</label>
				<div class="layui-input-inline">
					<input type="text" name="userName" placeholder="请输入用户名" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">创建时间</label>
					<div class="layui-input-inline" style="width: 150px;">
						<input type="text" id="start_time" name="beginDate" placeholder="开始时间" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-form-mid">-</div>
					<div class="layui-input-inline" style="width: 150px;">
						<input type="text" id="end_time" name="endDate" placeholder="结束时间" autocomplete="off" class="layui-input">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">是否锁定</label>
				<div class="layui-input-inline">
					<input type="radio" name="isLock" value="是" title="是">
					<input type="radio" name="isLock" value="否" title="否" checked>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>

		<script>
			//Demo
			layui.use(['form', 'laydate','table'], function() {
				var form = layui.form;
				var laydate = layui.laydate;
				var table = layui.table;

				laydate.render({
					elem: '#start_time' ,//指定元素
				});
				laydate.render({
					elem: '#end_time' //指定元素
				});
				//监听提交
				form.on('submit(formDemo)', function(data) {
					//layer.msg(JSON.stringify(data.field));
					//重载表格
					table.reload('demo', {
					  where: data.field
					});
					return false;
				});
			});
		</script>

		<table id="demo" lay-filter="tt"></table>
		<!-- 三个按钮，放在工具条上的 -->
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="setting">设置</a>
		  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
		<script>
			layui.use(['table', 'jquery','layer','transfer','form'], function() {
				var table = layui.table;
				var $ = layui.jquery;
				var layer = layui.layer;
				var transfer = layui.transfer;
				var form = layui.form;
				//第一个实例
				table.render({ //渲染表格
					elem: '#demo' //绑定id
						,
					height: 312,
					url: 'http://stuapi.ysd3g.com/api/GetUsersLayUI' //数据接口
						,
					method: 'post' //请求方法为post
						,
					limit: 5 //一页显示条数
						,
					limits: [5, 10, 15, 20] //修改分页条页码下拉框
						,
					where: {
						token: '231649c6-3627-4a7c-b1e0-20da6cad93d6',
					},
					page: true //开启分页
						,
					cols: [
						[ //表头
							{
								field: 'Id',
								title: '用户id ',
								sort: true,
								fixed: 'left'
							}, {
								field: 'LoginName',
								title: '用户名'
							}, {
								field: 'IsLockout',
								title: '是否锁定'
							}, {
								field: 'LastLoginTime',
								title: '最后登录时间'
							}, {
								field: 'CreateTime',
								title: '创建时间 '
							}, {
								field: 'PsdWrongTime',
								title: '密码错误次数'
							}, {
								field: 'LockTime',
								title: '用户锁定时间 '
							}, {
								field: 'ProtectEMail',
								title: '邮箱'
							}, {
								field: 'ProtectMTel',
								title: '手机号码'
							}, {
								field: 'RowNum',
								title: '行号'
							}, {
								title:'操作',
								fixed: 'right',
								width: 200,
								align: 'center',
								toolbar: '#barDemo' //绑定工具条
							}
						]
					]
				});

				//监听工具条
				table.on('tool(tt)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					var data = obj.data; //获得当前行数据
					var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
					var tr = obj.tr; //获得当前行 tr 的DOM对象

					if (layEvent === 'setting') { //设置
						//do somehing
						layer.open({
						  type: 1,
						  title:'用户<font color="red">['+data.LoginName+']</font>设置角色',
						  area:['500px','460px'],
						  content: $('#test1') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
						});
						//layer.msg('设置');
					} else if (layEvent === 'del') { //删除
						layer.confirm('真的删除行么', function(index) {
							obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
							layer.close(index);
							//向服务端发送删除指令
							$.post(
								'http://stuapi.ysd3g.com/api/DeleteUser', {
									uid: data.Id, //选中行的Id
									token: '231649c6-3627-4a7c-b1e0-20da6cad93d6'
								},
								function(res) {
									layer.msg(res.success);
								}, 'json'
							);
						});
					} else if (layEvent === 'edit') { //编辑
						//do something
						layer.msg('编辑');
						//同步更新缓存对应的值
						//表单初始赋值
						form.val("ff", {
						  "loginName": data.LoginName // "name": "value"
						  ,"email": data.ProtectEMail
						  ,"mtel": data.ProtectMTel
						});
						layer.open({
						  type: 1,
						  title:'编辑用户<font color="red">['+data.LoginName+']</font>信息',
						  area:['500px','460px'],
						  content: $('#test2') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
						});
						
						obj.update({
							username: '123',
							title: 'xxx'
						});
					}
					
					//定义数组,存储用户已有角色的Id
					var arr = new Array();
					
					//获取指定用户角色,初始穿梭框右侧列表
					$.post(
						'http://stuapi.ysd3g.com/api/GetRolesByUserIdLayUI',
						{
							uId:data.Id,
							token:'231649c6-3627-4a7c-b1e0-20da6cad93d6'
						},
						function(res){
							for(var i = 0;i<res.data.length;i++){
								arr.push(res.data[i].Id);//向数组添加元素
							}
							//console.log(arr);
							//获取所有角色,渲染穿梭框
							$.post(
								'http://stuapi.ysd3g.com/api/GetRolesAll',
								{
									token:'231649c6-3627-4a7c-b1e0-20da6cad93d6'
								},
								function(role_list){
									//渲染
									transfer.render({
									  elem: '#test1'  ,//绑定元素
									  title:['系统角色','用户角色'],
									  showSearch:true//显示搜索框
									  ,data: role_list//初始化左侧栏
									  ,value:arr//初始化右侧栏
									  ,onchange:function(role,index){
										  if(index==0){//左边往右边
											for(var i = 0;i<role.length;i++){
												$.post(
													'http://stuapi.ysd3g.com/api/AddUserToRole',
													{
														uId:data.Id,
														rId:role[i].value,
														token:'231649c6-3627-4a7c-b1e0-20da6cad93d6'
													},
													function(res){
														console.log(res);
													},'json'
												);
											}
											  
										  }else{//右边往左边
											  for(var i = 0;i<role.length;i++){
											  	$.post(
											  		'http://stuapi.ysd3g.com/api/RemoveUserFromRole',
											  		{
											  			uId:data.Id,
											  			rId:role[i].value,
											  			token:'231649c6-3627-4a7c-b1e0-20da6cad93d6'
											  		},
											  		function(res){
											  			console.log(res);
											  		},'json'
											  	);
											  }
										  }
									  } 
									  ,parseData: function(res){//解析字段
									      return {
									        "value": res.Id //数据值
									        ,"title": res.Name //数据标题
									      }
									    }
									  ,id: 'demo1' //定义索引
									});
								},'json'
							);
						},'json'
					);
					
					
				});

			});
		</script>
	</body>
	<!--穿梭框-用户赋予角色  -->
	<div id="test1" style="display: none;"></div>
	<!--编辑用户  -->
	<div id="test2" style="display: none;">
		<form id="ff" class="layui-form" action="" lay-filter="ff">
			<input type="hidden" name="token" value="231649c6-3627-4a7c-b1e0-20da6cad93d6" />
			<div class="layui-form-item">
				<label class="layui-form-label">用户名</label>
				<div class="layui-input-inline">
					<input type="text" name="loginName" readonly="readonly" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">邮箱</label>
				<div class="layui-input-inline">
					<input type="text" name="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">手机号</label>
				<div class="layui-input-inline">
					<input type="text" name="mtel" placeholder="请输入手机号" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
		
		<script>
			//Demo
			layui.use(['form', 'laydate','jquery'], function() {
				var form = layui.form;
				var laydate = layui.laydate;
				var $ = layui.jquery;
				//监听提交
				form.on('submit(edit)', function(data) {
					console.log(data);
					$.post(
						'http://stuapi.ysd3g.com/api/UpdateUser',
						data.field,
						function(res){
							//刷新页面
							location.reload();
						},'json'
					);
					return false;
				});
			});
		</script>
	</div>
</html>
